<template>
  <div style="display: flex; justify-content: center; padding: 50px 0">
    <LuckyWheel
      ref="myLucky"
      width="300px"
      height="300px"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      :defaultConfig="defaultConfig"
      @start="startCallback"
      @end="endCallback"
    />
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import utils from "../../assets/js/utils";
const blocks = [
  {
    padding: "10px",
    background: "#f4c743",
  },
  {
    padding: "15px",
    background: "#ffffff",
  },
];
const prizes = [
  { fonts: [{ text: "￥100", top: "10%" }], background: "#f3d641" },
  { fonts: [{ text: "￥200", top: "10%" }], background: "#f3d641" },
  { fonts: [{ text: "￥400", top: "10%" }], background: "#f3d641" },
  { fonts: [{ text: "￥600", top: "10%" }], background: "#f3d641" },
  { fonts: [{ text: "￥900", top: "10%" }], background: "#f3d641" },
  { fonts: [{ text: "￥1200", top: "10%" }], background: "#f3d641" },
  { fonts: [{ text: "￥1500", top: "10%" }], background: "#f3d641" },
  { fonts: [{ text: "￥1600", top: "10%" }], background: "#f3d641" },
];
const buttons = [
  {
    radius: "25%",
    background:'#ffffff'
  },
  {
    radius: "20%",
    pointer: true,
    background:'#f4c743',
    // imgs:[{
    //   src:new URL('../../assets/img/WechatIMG269.jpeg', import.meta.url).href,
    //   width:60,
    //   height:60,
    //   top:-30
    // }]
    fonts: [{ text: "开始", top: "-10px" }],
  },
];

const defaultConfig = {
  gutter: "3px",
  stopRange: 0.5,
  speed: 10,
};
const myLucky = ref(null);

const startCallback = () => {
  myLucky.value.play();
  setTimeout(() => {
    // 假设后端返回的中奖索引是0
    let n = utils.randomNum(0, 7);
    console.log(n);
    const index = n;
    // 调用stop停止旋转并传递中奖索引
    myLucky.value.stop(index);
  }, 6000);
};

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize);
};
</script>
<style scoped>
.ad {
  display: flex;
  justify-content: center;
}
</style>